<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>设备巡检</title>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="css/form.css" />
    <link rel="stylesheet" type="text/css" href="css/comm.css" />
    <link rel="stylesheet" type="text/css" href="../script/mui/mui.picker.min.css" />
    <link rel="stylesheet" type="text/css" href="../script/mui/mui.reset.css" />
    <link rel="stylesheet" type="text/css" href="css/analysis_historyfeesummary.css" />
    <link rel="stylesheet" type="text/css" href="css/customerservicelist.css" />
    <link rel="stylesheet" type="text/css" href="css/analysis_equipment_frm.css" />
    <link rel="stylesheet" type="text/css" href="../script/vant/index.css" />
    <style>
        .work-header-title{
            display: flex;
            justify-content: space-between;
        }
        .worder-header-label{
            border: solid 0.5px #289fff;
            color: #289fff;
            border-radius: 4px;
            padding: 0 5px;
            font-size: 0.65rem;
        }
        
        .label-org{
            border-color: #ff7505;
            color: #ff7505;
        }

        .text-right{
            text-align: right;
        }
        .overtime{
            background: #f5f5f5;
            color:#f00;
            padding: 1px 10px;
            border-radius: 50px;
            margin-left: 5px;
            font-size: 0.6rem;
        }
        .content span{
            color: #333;
        }

        .work-btn-title{
            display: flex;
            justify-content: space-between;
            border-top: solid 0.5px #ccc;
            margin-top: 15px;
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .work-btn-left{
            line-height: 30px;
            color: #289fff;
        }
        .text-org{
            color: #ff7505;  
        }
        .text-gray{
            color: #999;   
        }
        .text-red{
            color: #ff0000;  
        }
        .work_beginbtn {
            text-align: center;
            height: 30px;
            line-height: 30px;
            color: #fff;
            background: #289FFF;
            box-shadow: 0px 12px 24px 0px rgb(49 127 203 / 32%);
            border-radius: 22px;
            width: 65px;
        }
        .display_width{
            display: flex;
            justify-content: space-between;
        }
        .van-popup__close-icon--top-right{
            font-size: 16px;;
        }
        .time_beginbtn {
            text-align: center;
            height: 33px;
            line-height: 33px;
            color: #888;
            background: #f0f0f0;
            border-radius: 4px;
            width: 32%;
        }
        .time_beginbtn_active{
            color: #289FFF;
            background: #e2effb;
        }
        .bottom_yq{
            position: absolute;
            bottom: 30px;
            left: 25%;
            margin: 0 auto;
        }
        .delay_time_border{
            border: solid 0.5px #f0f0f0;
            border-radius: 4px;
            padding: 8px 12px;
        }
        .bd-label-org{
            width: 80px;
            text-align: center;
            border-radius: 20px;
            background-color: #fae7e0;
            color: coral;
            border-color: #fae7e0;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div v-on:click="doHideSearch()" v-if="showsearch" class="maskbg">
        </div>
        <div v-if="showsearchparam" class="searchparam nomenu" style="height: 70%;">
            <div class="searchcontent" style="height: 100%;">
                <div class="searchparamtitle" v-if="form.ProjectCompanyType==1">
                    项目名称
                </div>
                <div class="searchparamitem" v-if="form.ProjectCompanyType==1">
                    <label v-on:click="doSelectProject(item.ID,item.Name)" v-bind:class="{'active':form.ProjectIDs.indexOf(item.ID)>-1}" v-for="item in projectList">{{item.Name}}</label>
                </div>
                <div class="searchparamtitle">
                    任务状态
                </div>
                <div class="searchparamitem">
                    <label v-on:click="doSelectStatus(item.ID)" v-bind:class="{'active':form.StatusIDs.indexOf(item.ID)>-1}" v-for="item in StatusList">{{item.Name}}</label>
                </div>
                <div class="aui_bottom" style="background: #fff; border-radius: 0px 0px 14px 14px;">
                    <div v-on:click="doReset(1)" class="aui_bottombtn left">重置</div>
                    <div v-on:click="doSearch()" class="aui_bottombtn right">确认</div>
                </div>
            </div>
        </div>
        <div v-if="showsearchmonth" class="searchparam nomenu">
            <div class="searchparamtitle">
                时间
            </div>
            <div class="searchparamitem">
                <label v-bind:class="{'active':form.activeDate==1}" v-on:click="doClickDay(1)">今日</label>
                <label v-bind:class="{'active':form.activeDate==2}" v-on:click="doClickDay(2)">本周</label>
                <label v-bind:class="{'active':form.activeDate==3}" v-on:click="doClickDay(3)">本月</label>
            </div>
            <div class="searchparamtitle">
                任务日期
            </div>
            <div class="searchparamitem searchparamitem_input">
                <i class="icon iconfont icon-rili"></i>
                <span class="choose new-span-date" id="startdate" data-options='{"type":"date"}' v-bind:class="{'textColorPlaceholder':form.startTime==''}">{{form.startTime==''?'开始日期':form.startTime}}</span>
                <span style="padding: 0 10px;">
                    至
                </span>
                <span class="choose new-span-date" id="enddate" data-options='{"type":"date"}' v-bind:class="{'textColorPlaceholder':form.endTime==''}">{{form.endTime==''?'结束日期':form.endTime}}</span>
            </div>
            <div class="aui_bottom">
                <div v-on:click="doReset(2)" class="aui_bottombtn left">重置</div>
                <div v-on:click="doSearch()" class="aui_bottombtn right">确认</div>
            </div>
        </div>
        <div class="search_box fixedbox bgshadow" v-bind:class="{'fixedbox':showsearch}">
            <div class="searchitem" v-bind:class="{'chkedbox':showsearchparam}" v-on:click="doSelectSearchParam(1)">
                筛选
                <i v-if="!showsearchparam" class="icon iconfont icon-down"></i>
                <i v-if="showsearchparam" class="icon iconfont icon-shangjiantou" style="color:#fff;"></i>
            </div>
            <div class="searchitem" v-bind:class="{'chkedbox':showsearchmonth}" v-on:click="doSelectSearchParam(2)">
                {{form.activeDateDesc}}
                <i v-if="!showsearchmonth" class="icon iconfont icon-down"></i>
                <i v-if="showsearchmonth" class="icon iconfont icon-shangjiantou" style="color:#fff;"></i>
            </div>
        </div>
        <section id="main_refresh" class="aui-refresh-content">
            <!-- <div class="newcontentbox" style="padding-top: 0;">
                <label class="bababa"> {{ProjectName}} </label>
                <label class="lr-line" > | </label>
                <label class="bababa"> {{form.startMonth}} 统计 </label>
            </div> -->

            <div class="">
                <div class="aui_list boxarea mb20" v-for="item in list">
                    <div class="work-header-title">
                       <div>{{item.DevicePlanName}}</div>
                       <!-- <div>
                           <label class="worder-header-label" v-bind:class="{'label-org':item.PlanType==0}">{{item.PlanTypeDesc}}任务</label>
                        </div> -->
                    </div> 
                    <div class="work_con_box_time marginheight">
                        <div class="work_con_box_left">任务时间段</div>
                        <div class="work_con_box_right text-right">
                            <label>{{item.StartTime}} ~ {{item.EndTime}}<span v-if="item.OutTimeStatusDesc=='超时'" class="overtime">{{item.OutTimeStatusDesc}}</span></label>
                            <label></label>
                        </div>
                    </div>
                    <div class="work_con_box_name marginheight">
                        <div class="work_con_box_left">负&nbsp;&nbsp;责&nbsp;&nbsp;人</div>
                        <div class="work_con_box_right text-right">
                            <label v-if="item.UserNameList">{{item.UserNameList.toString()}}</label>
                            <label v-else>--</label>
                        </div>
                    </div>
                    <div class="work_con_box_time marginheight">
                        <div class="work_con_box_left">保洁点</div>
                        <div class="work_con_box_right">
                            <div class="prograssbg">
                                <div class="prograssmsg"
                                    v-bind:style="{'width':((item.completeCount/item.count)*100).toFixed(2)+'%'}"></div>
                            </div>
                            <div class="content mt10">
                                <span>( {{item.completeCount}}/{{item.count}} )</span><span class="ml10">已完成:{{((item.completeCount/item.count)*100).toFixed(2)}}%</span>
                                <span v-if="item.abnormalCount>0" class="percent" style="color: #ff0000;">有异常</span></div>
                        </div>
                        <!-- <div class="work_con_box_right">
                            <label>{{item.count}}</label>
                        </div> -->
                    </div>
                    <div  class="work-btn-title">
                        <div class="work-btn-left" v-bind:class="{'text-org':item.TaskStatus==0,'text-blue':item.TaskStatus==1,'text-gray':item.TaskStatus==2}" >{{item.TaskStatusDesc}}</div>
                        <div>
                            <label v-on:click="open_list(item)" class="work_beginbtn" >查看</label>
                            <label v-if="IsAnalysis&&item.CanAddTime" v-on:click="open_detail_delay(item)" class="work_beginbtn" >延期</label>
                         </div>
                     </div> 
                </div>
                <div v-if="list.length>0" class="notodayList ccc"  style="background:none;">
                    没有更多内容
                </div>
            </div>
            <div class="noinfo" id="noorder" v-if="list.length<=0">
                <img src="../image/index/noinfomsg_icon.png" alt="" />
                <h5><br />暂无相关数据</h5>
            </div>
        </section>


          <!--延期弹框-->
          <van-popup v-model:show="IsAllowDelay" round closeable teleport="body" style="width: 80%;height: 300px;">
            <div class="aui-padded-15">
                <div class="text-grey aui-margin-b-15" style="text-align: center;color: #666;">
                    任务延期
                </div>
                <div>
                    <div class="display_width aui-margin-b-15">
                        <div>任务结束时间：</div>
                        <div class="text-grey">已延期<span class="text-red">{{DelayTimeDiff}}分钟</span></div>
                    </div>
                    <div class="aui-margin-b-15">
                       <div class="delay_time_border display_width" @click="onOpenTime()">
                           <div>{{DelayTime}}</div>
                           <div><i class="icon iconfont icon-shijian text-grey aui-font-size-14"></i></div>
                       </div>
                    </div>
                    <div class="display_width aui-margin-b-15">
                        <label v-for="item in timelist" class="time_beginbtn" @click="onChooseDelayTime(item)" v-bind:class="{'time_beginbtn_active':item.ID==timeModel.ID}">+{{item.time}}分钟</label>
                    </div>
                    <div class="bottom_yq">
                        <label @click="open_cancel_delay" class="work_beginbtn work_beginbtn_white" style="width: 80px;">取消</label>
                        <label @click="open_ok_delay" class="work_beginbtn aui-margin-l-10" style="width: 80px;" >确定</label>
                    </div>
                </div>
            </div>
        </van-popup>

        <!--底部弹出延期时间选择-->
        <van-popup v-model:show="IsDelayTime" round position="bottom" :style="{ height: '40%' }">
            <van-datetime-picker v-model="currentDate" type="datetime" title="选择延期时间" :min-date="minDate" :max-date="maxDate" @cancel="onCancel" @confirm="onConfirm" />
        </van-popup>
    </div>
</body>

<script type="text/javascript " src="../script/api.js "></script>
<script type="text/javascript " src="../script/vue.js "></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript" src="../script/aui-tab.js"></script>
<script type="text/javascript" src="../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../script/mui/mui.min.js"></script>
<script type="text/javascript" src="../script/mui/mui.picker.min.js"></script>
<script type="text/javascript" src="../script/mui/mui.poppicker.js"></script>
<script type="text/javascript" src="../script/aui-scroll.js"></script>
<script type="text/javascript" src="../script/aui-slide.js"></script>
<script type="text/javascript" src="../script/aui-popup.js"></script>
<script type="text/javascript" src="../script/page/dateRangeUtil.js"></script>
<script type="text/javascript " src="../script/vant/vue.js"></script>
<script type="text/javascript " src="../script/vant/vant.js"></script>
<script type="text/javascript " src="../script/moment/moment.js"></script>
<script type="text/javascript " src="js/bjlh_tasklist.js"></script>

</html>
